<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}"/>
    <title>首页</title>
    <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/common.js' %}"></script>
    <script src="{% static 'js/login.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'layer/layer.js' %}"></script>
</head>
<body>
<!-- 导航界面 -->
<nav>
    <div class="nav">
        <span class="lf">终于等到你</span>
        <span class="rt">爱下载资源分享平台</span>
    </div>
</nav>

<!-- 登录面板 -->
<section class="main">

    <div class="login-type">
        <a class="checked" name="login-pwd">密码登录</a><a name="login-sms">邮箱登录</a>
    </div>

    <form id="lg1" class="login-pwd login-panel" autocomplete="off">
        <input type="text" name="username" class="inp user" placeholder="账号/邮箱/手机号" v-model="username"/>
        <input type="password" name="password" class="inp pwd" placeholder="密码" v-model="password"/>
        <!-- 处理密码眼睛 -->
        <span class="eye clos"></span>

        <div class="re">
            <input type="checkbox" name="remember-me" id="remember-me" v-model="remember"/>
            <label for="remember-me">下次自动登录</label>
            <a class="find-pass" href="{% url 'findpass' %}">忘记密码，立即找回</a>
        </div>

        <a class="log-btn" @click="login">登录</a>

        <a href="{% url 'register' %}" class="regist">没有账号？立即注册</a>

    </form>

    <form id="lg2" class="login-sms login-panel" autocomplete="off">
        <input type="text" name="tel" class="inp tel" placeholder="邮箱" v-model.trim="email"/>
        <input type="code" name="code" class="inp code" placeholder="验证码" v-model.trim="code"/>
        <button class="btn-code" v-text="btnText" @click.prevent="getcode" :disabled="btnDisabled"></button>

        <div class="re">
            <input type="checkbox" name="remember-me" id="remember" v-model="remember"/>
            <label for="remember">下次自动登录</label>
        </div>

        <a class="log-btn" @click="email_login">登录</a>

        <a href="{% url 'register' %}" class="regist">没有账号？立即注册</a>

    </form>

    <div class="third">
        <span class="lf"></span>第三方登录<span class="rf"></span>
    </div>

    <p class="third">
        <a class="zfb"><span>支付宝</span></a>
        <a class="wx"><span>微信</span></a>
        <a class="qq"><span>QQ</span></a>
    </p>

</section>

<footer>
    <p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
    <p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
    <p class="num">沪ICP备14048333号</p>
</footer>

<script>
    Vue.createApp({
        data() {
            return {
                email: '',
                code: '',
                remember: true,
                btnText: '获取验证码',
                btnDisabled: false, //是否禁用按钮
                nextUrl: '{{ nextUrl }}'
            }
        },
        methods: {
            getcode() {
                if (!this.email) {
                    layer.msg('邮箱不能为空', {icon: 5})
                    return
                }

                if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.email)) {
                    layer.msg('邮箱格式不正确', {icon: 5})
                    return
                }
                //修改按钮
                let time = 60
                this.btnText = `${time}s后重发`
                this.btnDisabled = true
                //验证码倒计时
                let playing = setInterval(() => {
                    time--;
                    if (time <= 0) {
                        clearInterval(playing)
                        this.btnText = '获取验证码'
                        this.btnDisabled = false
                    } else {
                        this.btnText = `${time}s后重发`
                    }

                }, 1000)

                //异步请求 发送邮件
                axios.post('/send_login_code/', {email: this.email},
                    {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                    .then(res => {
                        if (res.data.code === 200) {
                            layer.msg('验证码已发送，请注意查收', {icon: 6})
                        } else {
                            layer.msg(res.data.msg, {icon: 5})
                        }

                    })

            },
            email_login() {

                if (!this.code) {
                    layer.msg('验证码不能为空', {icon: 5})
                    return
                }
                const index = layer.load(2)
                axios.post('/email_login/', {email: this.email, code: this.code, remember: this.remember}
                    , {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                    .then(res => {
                        if (res.data.code == 200) {
                            layer.msg('登录成功', {icon: 6})
                            setTimeout(function () {
                                location.href = '/index/'
                            }, 1500)
                        } else {
                            layer.msg(res.data.msg, {icon: 5})
                        }

                    }).finally(() => {
                    layer.close(index)
                })

            }


        }
    }).mount("#lg2")


    Vue.createApp({
        data() {
            return {
                username: '',
                password: '',
                remember: true,
            }
        },
        methods: {


            login() {
                if (!this.username) {
                    layer.msg('账号/手机号不能为空', {icon: 5})
                    return
                }
                if (!this.password) {
                    layer.msg('密码不能为空', {icon: 5})
                    return
                }
                const index = layer.load(2)
                axios.post('/login/', {username: this.username, password: this.password, remember: this.remember}
                    , {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                    .then(res => {
                        if (res.data.code == 200) {
                            layer.msg('登录成功', {icon: 6})
                            setTimeout(function () {
                                location.href = '/index'
                            }, 1000)
                        } else {
                            layer.msg(res.data.msg, {icon: 5})
                        }

                    }).finally(() => {
                    layer.close(index)
                })
            }


        }
    }).mount("#lg1")


</script>

</body>

</html>

